<template>
  <div class="home-goods-find">
    <van-grid :border="false" class="grid" icon-size="35">
      <van-grid-item
        icon="https://cube.elemecdn.com/c/54/38fa90be5da041bbec3945fb82c00png.png"
        to="/eleme"
        text="饿了么"
      />
      <van-grid-item icon="/img/Xnip2020-05-09_09-44-42.png" text="大额好券" @click="toDehq" />
      <van-grid-item icon="/img/Xnip2020-05-09_09-46-30.png" text="本地生活" @click="toBdsh" />
      <van-grid-item icon="/img/Xnip2020-05-09_09-47-13.png" text="实时热销" @click="toSsex" />
    </van-grid>

    <div class="recommend">
      <van-row>
        <van-col span="12" class="item-zone" style="border-right: #eee 1px solid;" @click="toMyzt">
          <div class="title">母婴主题</div>
          <div class="sub">从备孕到儿童的优质商品</div>
          <van-row class="img">
            <van-col span="12" class="image">
              <img :src="whiteImage[0]" alt />
            </van-col>
            <van-col span="12" class="image">
              <img :src="whiteImage[1]" alt />
            </van-col>
          </van-row>
        </van-col>
        <van-col span="12" class="item-zone" @click="toGfsp">
          <div class="title">高返商品</div>
          <div class="sub">返利超高</div>
          <van-row class="img">
            <van-col span="12" class="image">
              <img :src="whiteImage[2]" alt />
            </van-col>
            <van-col span="12" class="image">
              <img :src="whiteImage[3]" alt />
            </van-col>
          </van-row>
        </van-col>
      </van-row>

      <van-row>
        <van-col span="12" class="item-zone" style="border-right: #eee 1px solid;" @click="toPpsp">
          <div class="title">品牌商品</div>
          <div class="sub">有牌儿，也有券儿</div>
          <van-row class="img">
            <van-col span="12" class="image">
              <img :src="whiteImage[4]" alt />
            </van-col>
            <van-col span="12" class="image">
              <img :src="whiteImage[5]" alt />
            </van-col>
          </van-row>
        </van-col>
        <van-col span="12" class="item-zone" @click="toClf">
          <div class="title">潮流范</div>
          <div class="sub">时尚和流行趋势</div>
          <van-row class="img">
            <van-col span="12" class="image">
              <img :src="whiteImage[6]" alt />
            </van-col>
            <van-col span="12" class="image">
              <img :src="whiteImage[7]" alt />
            </van-col>
          </van-row>
        </van-col>
      </van-row>

      <div class="item-zone" style="border-top: #eee 1px solid;" @click="toTh">
        <div class="title">特惠</div>
        <div class="sub">优质特惠宝贝，销量高、评价高</div>
        <van-row class="img">
          <van-col span="6" class="image">
            <img :src="whiteImage[8]" alt />
          </van-col>
          <van-col span="6" class="image">
            <img :src="whiteImage[9]" alt />
          </van-col>
          <van-col span="6" class="image">
            <img :src="whiteImage[10]" alt />
          </van-col>
          <van-col span="6" class="image">
            <img :src="whiteImage[11]" alt />
          </van-col>
        </van-row>
      </div>
    </div>

    <van-tabs type="card" :ellipsis="false" class="tags" sticky offset-top="54">
      <van-tab>
        <template #title>
          <div class="title">有好货</div>
          <div class="sub">品质好货</div>
        </template>
        <recommend-list materialId="4092"/>
      </van-tab>
      <van-tab>
        <template #title>
          <div class="title">天天特卖</div>
          <div class="sub">低价好货</div>
        </template>
        <recommend-list materialId="31362"/>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import RecommendList from "@/views/home/components/RecommendList.vue";
import { Col, Row, Tab, Tabs, Grid, GridItem } from "vant";
export default {
  name: "HomeGoodsFind",
  components: {
    RecommendList,
    [Col.name]: Col,
    [Row.name]: Row,
    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
    [Grid.name]: Grid,
    [GridItem.name]: GridItem
  },
  data() {
    return {
      whiteImage: []
    };
  },
  mounted() {
    let vm = this;
    this.$nextTick(function() {
      vm.$ajax.get("/home/v1/recommend").then(function(r) {
        vm.whiteImage = r.data;
      });
    });
  },
  methods: {
    toDehq() {
      this.$router.push({
        name: "TagItems",
        params: {
          t: "大额好券",
          d: [
            { t: "综合", i: "27446" },
            { t: "女装", i: "27448" },
            { t: "食品", i: "27451" },
            { t: "美妆个护", i: "27453" },
            { t: "家居家装", i: "27798" },
            { t: "母婴", i: "27454" }
          ]
        }
      });
    },
    toMyzt() {
      this.$router.push({
        name: "TagItems",
        params: {
          t: "母婴主题",
          d: [
            { t: "备孕", i: "4040" },
            { t: "0至6月", i: "4041" },
            { t: "7至12月", i: "4042" },
            { t: "1至3岁", i: "4043" },
            { t: "4至6岁", i: "4044" },
            { t: "7至12岁", i: "4045" }
          ]
        }
      });
    },
    toSsex() {
      this.$router.push({
        name: "TagItems",
        params: {
          t: "实时热销",
          d: [
            { t: "综合", i: "28026" },
            { t: "大服饰", i: "28029" },
            { t: "大快消", i: "28027" },
            { t: "电器美家", i: "28028" }
          ]
        }
      });
    },
    toGfsp() {
      this.$router.push({
        name: "TagItems",
        params: {
          t: "高返商品",
          d: [
            { t: "综合", i: "13366" },
            { t: "女装", i: "13367" },
            { t: "家居家装", i: "13368" },
            { t: "数码家电", i: "13369" },
            { t: "鞋包配饰", i: "13370" },
            { t: "美妆个护", i: "13371" },
            { t: "男装", i: "13372" },
            { t: "内衣	", i: "13373" },
            { t: "母婴", i: "13374" },
            { t: "食品", i: "13375" },
            { t: "运动户外", i: "13376" }
          ]
        }
      });
    },
    toPpsp() {
      this.$router.push({
        name: "TagItems",
        params: {
          t: "品牌商品",
          d: [
            { t: "综合", i: "3786" },
            { t: "女装", i: "3788" },
            { t: "家居家装", i: "3792" },
            { t: "数码家电", i: "3793" },
            { t: "鞋包配饰", i: "3796" },
            { t: "美妆个护", i: "3794" },
            { t: "男装", i: "3790" },
            { t: "内衣	", i: "3787" },
            { t: "母婴", i: "3789" },
            { t: "食品", i: "3791" },
            { t: "运动户外", i: "3795" }
          ]
        }
      });
    },
    toTh() {
      this.$router.push({
        name: "TagItems",
        params: {
          t: "特惠",
          d: [{ t: "综合", i: "4094" }]
        }
      });
    },
    toClf() {
      this.$router.push({
        name: "TagItems",
        params: {
          t: "潮流范",
          d: [{ t: "综合", i: "4093" }]
        }
      });
    },
    toBdsh() {
      this.$router.push({
        name: "TagItems",
        params: {
          t: "本地生活",
          d: [
            { t: "今日爆款", i: "30443" },
            { t: "淘票票", i: "19812" },
            { t: "大麦网", i: "25378" },
            { t: "优酷会员", i: "28636" },
            { t: "有声内容", i: "29105" },
            { t: "hpv疫苗", i: "25885" },
            { t: "体检", i: "25886" },
            { t: "口腔", i: "25888" },
            { t: "基因检测", i: "25890" },
            { t: "签证", i: "26077" },
            { t: "酒店", i: "27913" },
            { t: "自助餐", i: "27914" },
            { t: "门票", i: "19811" },
            { t: "口碑", i: "19810" },
            { t: "生活服务", i: "28888" },
            { t: "家政服务	", i: "19814" },
            { t: "汽车定金", i: "28397" }
          ]
        }
      });
    }
  }
};
</script>

<style scoped>
.recommend {
  margin-top: 10px;
  background-color: white;
  border-radius: 15px;
  padding: 5px;
}

.item-zone {
  padding: 8px;
}

.title {
  font-size: 15px;
  font-weight: bold;
  color: #3a3636;
}

.sub {
  font-size: 13px;
  color: #858585;
}

.recommend .img {
  margin-top: 5px;
}

.image {
  text-align: center;
}

.image img {
  width: 80%;
}

div.tags {
  margin-top: 10px;
}

div.tags >>> .van-tabs__wrap,
div.tags >>> .van-tab,
div.tags >>> .van-tabs__nav {
  background-color: transparent;
}

div.tags >>> .van-tabs__wrap {
  height: 42px;
}

div.tags >>> .van-tab.van-tab--active {
  background-color: transparent;
}
div.tags >>> .van-tab__pane {
  padding: 0;
}
div.tags >>> .van-tabs__wrap--scrollable .van-tabs__nav {
  overflow: visible;
}

div.tags >>> .van-tab.van-tab--active .title {
  color: red;
}
div.tags >>> .van-tab.van-tab--active .sub {
  background-color: red;
  border-radius: 10px;
  color: white;
}

.tags .title {
  line-height: 20px;
}
.tags .sub {
  line-height: 20px;
  font-size: 11px;
  width: 60px;
}

div.tags >>> .van-tabs__nav {
  justify-content: space-around;
}

div.tags >>> .van-tabs__wrap--scrollable .van-tab--complete {
  -webkit-flex: 0 1 auto;
  flex: 0 1 auto;
}

div.tags >>> .van-sticky--fixed {
  background-color: white;
  transition: background-color 0.4s;
}

div.tags >>> .van-tabs__nav--card {
  height: auto;
}

.grid {
  border-radius: 10px;
  background-color: #fff;
}

.grid >>> .van-grid-item__content {
  background-color: transparent;
}
</style>